Text Editors

Click Here For Video Review

You are probably wondering how and where to start coding your website.

For that, you will need a text editor!

You may have used Microsoft Word or Google Docs before you know if you spell something wrong or used incorrect grammar by the program underlining the word or sentence.

Text editors for coding are similar, except they read code and monitor syntax (brackets and stuff)!

You'll be creating a workspace, which is just a folder on your computer to save everything to.

Inside the workspace folder will be a folder named Sublime.
Sublime is a text editor that helps you write HTML, CSS and other computer code.

The videos will be using this Text Editor to help you with your understanding these lessons.

If you have experience with other Text Editors feel free to use any that you like.


When you understand this slide, Click the RIGHT ARROW to move on!


Shortcuts!

Click Here For Video Review

Shortcut keys are super useful to make coding a better experience.
Below are a bunch of different shortcut keys used with text editors, browsers and just plain useful things to know!

Click each button below to see the shortcut / Information it provides.





Cut! Highlight any section in the text editor and you can 'cut' it, meaning it copies it and also deletes it!

Command + X if on a mac!

Browser Hints




This is an example of an URL:

file:///Users/COMP_NAME/Desktop/Game Design_Windows/Pong/pong.html

It tells you the location of a file, in this case pong.html.
Notice the end of the URL: Pong/pong.html.

That means pong.html is inside a folder named Pong.
And.....

The Pong folder is in a folder named GameDesign_Windows...which is on the Desktop... and so on. Very useful information.



This one is for your browser.
This will refresh the browser so you can see any new changes in your code that have been saved.

Text Editor Shortcuts



Undo! Very important. It will undo the last (previous) code you've written in the editor.

Command + Z if on a mac!





Copy! Highlight any section in the text editor and you can 'copy' it. The next button will tell you how to paste it!

Command + C if on a mac!



Paste! Once you have a selection 'copied', you can paste that section with CTRL + V!

Command + V if on a mac!



Save! Every time, you make a change you'll need to save your file before you can see the new changes in the browser. You'll be using this one a lot.

Command + S if on a mac!



This is only for Sublime Text your text editor!
This will pass your code to your default browser to display!
It's how you view what you've actually coded.


When you understand this slide, Click the RIGHT ARROW to move on!

Practice!

Click Here For Video Review

Go through each step to try some Text Editor shorcuts in action!


  1. Undo.
    In the editor to the right, type something in. Then, on the keyboard, press
    CTRL + Z.
  2. Copy & Paste.
    Highlight some text in the editor and press CTRL + C then click to a new area and press
    CTRL + V.



When you understand this slide, Click the RIGHT ARROW to move on!

Activity

Click Here For Video Review

This Activity will walk you through:

  1. Creating a new folder on your computer to be your workspace.
  2. Downloading a text editor.
  3. Opening up your the Sublime Text editor!
Read the next lines carefully!

    Click a button below of your Computer's Operating System for step by step instructions.         

    Windows Instructions Mac Instructions Chromebook

     Windows Workspace Download Instructions
    Watch the Video or Follow the Steps below!

    Click for Video Tutorial: 'Downloading the Windows Workspace'!

  1. Create a New Folder on your Desktop, this will be where you'll save all your coding work!
    Name your new folder whatever you'd like, I named mine Seths Coding.
    If you have completed a previous course then you don't need to create a new folder, use the workspace already created from that course.
    1. To create a new folder, RIGHT-CLICK anywhere on your Desktop and select New > Folder.
    View Screenshot 1.

    2.
  2. Next, CLICK HERE to Download Sublime Text for WINDOWS - Wait for it to finish downloading then move on to step 3!
  3. Open the Downloads folder, on your computer, and find on the file Sublime Text - Windows.zip and Double Click on it.
    4. View Screenshot
  4. After you've double clicked on the Sublime Text - Windows.zip download, then click Extract and Extract All.
    On some operating systems, you just need to click Extract!
    5. View Screenshot 1.

    2.

    These screenshots are from Windows 10, other versions maybe slightly different.
    The idea is you want to Extract the Sublime folder from Sublime Text - Windows.zip.
  5. Next, click Browse, then from the left column select Desktop, then your New Folder (from step 1) and click Select Folder. Last, in the next window, click Extact (It takes a bit for it to completely extract).
    6. View Screenshot 1.

    2.

    3.

    Wait for it to Finish extracting, then move on to the next Step!
  6. From the desktop, Double Click on your new folder (from step 1) then Double Click on the folder named Sublime.
    7. View Screenshot
  7. Inside the Sublime folder, scroll down to find the file sublime_text.exe then Double Click on it to open up Sublime!
    8. View Screenshots

    You may have to scroll to find sublime_text.exe

    1.

     You Should see This Editor Appear! (You may have to click a window that says 'Run') 
    2.
  8. If you have Sublime Text open (black box) move onto Lesson 1.4!

     Mac Workspace Download Instructions

  1. Create a new folder on your Desktop, this will be where you'll save all your coding work!
    Name your new folder whatever you'd like, I named mine Seths Coding.
    1. To create a new folder, RIGHT-CLICK anywhere on your Desktop and select New Folder.
    View Screenshot 1.

    2.
  2. Next, Click Here to Download Sublime Text for MAC - Wait for it to finish downloading then move on to step 3!
  3. Open the Downloads folder on your computer then find on the file Sublime Text Mac.zip (the one you just downloaded) and drag it into your Coding Folder.
    1. To open the Downloads folder: Click anywhere on the Desktop, then from the top menu click Go > Downloads.
    View Screenshot 1.

    2.
  4. Open your Coding Folder created in step one, and Double Click on the file Sublime Text Mac.zip.
    5. View Screenshot 1.

    2.
  5. Double Click on the folder Sublime and then Double Click on the application Sublime Text 2.0.2.dmg!
    6. View Screenshot 1.

    2.

    3.

    You may have to scroll to find Sublime Text 2 in your Applications folder.
    4.

    5.
  6. If you have Sublime Text open (black box) move onto the Next Lesson!

Make sure you remember where the Sublime Folder is and how to open up the Sublime text editor!

Keep your text editor (Sublime Text) open.
Now you're ready to start writing your own HTML.
Move on to the next Lesson!